<template>
	<div>
		<!-- 轮播图 -->
		<Carousel />
		<!-- 搜索框 -->
		<Search />
		<!-- 展示医院结构 -->
		<el-row :gutter="20">
			<el-col :span="20">
				<!-- 等级子组件 -->
				<Level @change="changeHostype" />
				<!-- 地区子组件 -->
				<Region @change="changedistrictCode" />
				<div v-loading="loading">
					<div class="hospital" v-if="hospitalList.length > 0">
						<!-- 医院卡片 -->
						<div class="hospital-list" :class="{ 'not-show': loading }">
							<Card v-for="item in hospitalList" :key="item.id" :hospital-info="item" />
						</div>
						<!-- 分页 -->
						<el-pagination
							class="pagination"
							v-model:current-page="pageNo"
							v-model:page-size="pageSize"
							:page-sizes="[10, 20, 30, 40]"
							:disabled="loading"
							:background="true"
							layout="prev, pager, next, jumper, sizes, total"
							:total="total"
							@current-change="currentChange"
							@size-change="sizeChange" />
					</div>
					<el-empty v-else-if="!loading" description="暂无数据" />
				</div>
			</el-col>
			<el-col :span="4"><Tip /></el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getHospitalList } from '@/api/home';
import { Content } from '@/api/home/type';

// 轮播图组件
import Carousel from './carousel/index.vue';
// 搜索组件
import Search from './search/index.vue';
// 等级组件
import Level from './level/index.vue';
// 地区组件
import Region from './region/index.vue';
// 医院卡片
import Card from './card/index.vue';
// 右侧组件
import Tip from './tip/index.vue';

// 分页器数据
let pageNo = ref(1); // 当前页码
let pageSize = ref(10); // 每页显示多少条
let total = ref(0); // 总页数

// 医院数据
let hospitalList = ref<Content>([]);
let loading = ref(false);

// 医院等级
let hostype = ref('');
// 医院地区
let districtCode = ref('');
// 医院等级变化回调
function changeHostype(v: string) {
	hostype.value = v;
	getHospitalInfo();
}
// 医院等级变化回调
function changedistrictCode(v: string) {
	districtCode.value = v;
	getHospitalInfo();
}

// 获取医院数据
function getHospitalInfo() {
	loading.value = true;

	getHospitalList(pageNo.value, pageSize.value, hostype.value, districtCode.value)
		.then(
			(res) => {
				if (res.code) {
					hospitalList.value = res.data.content;
					total.value = res.data.totalElements;
				}
			},
			() => {}
		)
		.finally(() => {
			loading.value = false;
		});
}

// 页码变化回调
function currentChange() {
	getHospitalInfo();
}

// pageSize 变化回调
function sizeChange() {
	getHospitalInfo();
}

onMounted(() => {
	getHospitalInfo();
});
</script>

<style scoped lang="scss">
.hospital-list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20px;
	justify-content: space-between;
	&.not-show {
		visibility: hidden;
	}
}

.pagination {
	margin-bottom: 20px;
}
</style>
